<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 前端巅峰交流群私信我 -->
    <!-- position -->
    <!-- fixed 固定定位 元素相对于浏览器视口进行固定位置 即便这个窗口滚动位置也不会进行改变 元素的位置
    和文档流无关 所以不占据空间 Fixed定义的元素和其他元素重叠 -->
    <!-- 相对定位 relative  相对定位是相对与一个元素进行定位 他相对与这个元素的七点进行移动 元素占据原来的空间 
    -->
    <!-- 绝对定位 相对与最近的父元素进行定位 如果没有父元素 就一直向上找 直到找到html进行相对定位
    他与文档无关 不占据空间 定位的元素和其他元素重叠 -->
</body>
</html>